<template>
    <Row style="padding-bottom: 60px;">
    </Row>
    <Row style="padding-bottom: 30px;">
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="博客文章" :value="blogflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="博客目录" :value="blogdlen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="链接地址" :value="linkflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="链接类型" :value="linkdlen" />
        </Col>
    </Row>
    <Row style="padding-bottom: 30px;">
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="图片资源" :value="imgflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="图片目录" :value="imgdlen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="视频资源" :value="videoflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="视频目录" :value="videodlen" />
        </Col>
    </Row>
    <Row style="padding-bottom: 30px;">
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="音乐资源" :value="musicflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="播放列表" :value="musicdlen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="食谱记录" :value="foodflen" />
        </Col>
        <Col :span="6" style="display: flex; justify-content: center;">
        <Statistic title="食谱目录" :value="fooddlen" />
        </Col>
    </Row>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import {
    Row,
    Col,
    Statistic,
} from "ant-design-vue";
import { Api } from "../util/Api";
import { posturl } from "../util/MyAxios";
const blogflen = ref(0);
const blogdlen = ref(0);
const linkflen = ref(0);
const linkdlen = ref(0);
const imgflen = ref(0);
const imgdlen = ref(0);
const videoflen = ref(0);
const videodlen = ref(0);
const musicflen = ref(0);
const musicdlen = ref(0);
const foodflen = ref(0);
const fooddlen = ref(0);

onBeforeMount(() => {
    fetchData();
});

async function fetchData() {
    await posturl(Api.Statistic_GetFileStatistic)
        .then((response) => {
            // console.log(response.data);
            if (response.data != null && response.data != null && response.data.length > 0) {
                for (let i = 0; i < response.data.length; i++) {
                    if (response.data[i].name === 'Img') {
                        imgflen.value = response.data[i].flen;
                        imgdlen.value = response.data[i].dlen;
                    }
                    if (response.data[i].name === 'Blog') {
                        blogflen.value = response.data[i].flen;
                        blogdlen.value = response.data[i].dlen;
                    }
                    if (response.data[i].name === 'Food') {
                        foodflen.value = response.data[i].flen;
                        fooddlen.value = response.data[i].dlen;
                    }
                    if (response.data[i].name === 'Video') {
                        videoflen.value = response.data[i].flen;
                        videodlen.value = response.data[i].dlen;
                    }
                    if (response.data[i].name === 'Link') {
                        linkflen.value = response.data[i].flen;
                        linkdlen.value = response.data[i].dlen;
                    }
                    if (response.data[i].name === 'Music') {
                        musicflen.value = response.data[i].flen;
                        musicdlen.value = response.data[i].dlen;
                    }
                }
            } else {
                data.value = [];
            }
        })
        .catch((error) => {
            console.error("Error fetching data:", error);
            message.info(error.name + error.message + error.stack);
        });
}

</script>


<style scoped></style>